<template>
    <el-dialog v-model="visible" title="时光机" width="360" draggable overflow append-to-body>
        <div>
            <el-text size="small">回退到指定的历史期号，重新复盘。</el-text>
            <div class="flex-items-center mt-2">

                <span>期号：</span>
                <el-select v-model="activeDrawNum" placeholder="请选择" size="small" style="width: 240px">
                    <el-option v-for="(item, idx) in drawNums" :key="idx"
                        :label="`${item.lotteryDrawNum} 日期：${item.lotteryDrawTime}`" :value="item.lotteryDrawNum" />
                </el-select>
            </div>
        </div>
        <template #footer>
            <el-button-group size="small">
                <el-button type="primary" @click="onSubmit()">确定</el-button>
                <el-button type="warning" @click="onReset()">重置</el-button>
                <el-button type="info" @click="visible = false">关闭</el-button>
            </el-button-group>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import DltDataModel from '@/model/DltDataModel';
let dltDataModel = new DltDataModel();

const visible = defineModel();
const dataset = dltDataModel.getDataSource();
const drawNums = dataset.map(v => { return { lotteryDrawNum: v.lotteryDrawNum, lotteryDrawTime: v.lotteryDrawTime } });
const activeDrawNum = ref(dltDataModel.getActiveDrawNum());

const onSubmit = () => {
    dltDataModel.setActiveDrawNum(activeDrawNum.value);
    setTimeout(() => {
        location.reload();
    }, 500)
}

const onReset = () => {
    dltDataModel.setActiveDrawNum('');
    setTimeout(() => {
        location.reload();
    }, 500)
}
</script>